<template>
    <div>
        <h1>房价增加</h1>
        名称：<input type="text" v-model="hn.name"><br>
        价格：<input type="text" v-model="price1">~<input type="text" v-model="price2"><br>
        <input type="button" value="查询" @click="show">
        <input type="button" value="批量删除" @click="DelAll">
        <input type="button" value="批量禁用" @click="UpDownAll(0)">
        <input type="button" value="批量启用" @click="UpDownAll(1)">
      
        <table class="table table-bordered">
            <tr>
                <td><input type="checkbox" v-model="checkAll" @click="QuanFan"></td>
                <td>Id</td>
                <td>房价计划图标</td>
                <td>门店id</td>
                <td>房型外键</td>
                <td>设置的价格</td>
                <td>房价名称</td>
                <td>房量数量</td>
                <td>早餐数量</td>
                <td>人数数量</td>
                <td>房价计划状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td><input type="checkbox" :value="item.id" v-model="ids"></td>
                <td>{{ item.id }}</td>
                <td><img :src="item.photo" alt="" width="50px" height="50px"></td>
                <td>{{ item.menDian }}</td>
                <td>{{ item.houseType }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.houseNum }}</td>
                <td>{{ item.foodNum }}</td>
                <td>{{ item.personNum }}</td>
                <td>{{ item.state == 0 ? '禁用' : '启用' }}</td>
                <td>
                    <input type="button" value="修改" @click="FanTian(item.id)">
                </td>
            </tr>
        </table>
        总共<span>{{ data.zt }}</span>条
        每页<span>{{ hn.size }}</span>条
        当前<span>{{ hn.index }}</span>/<span>{{ data.zy }}</span>页
        <input type="button" value="首页" @click="FenYe('a')">
        <input type="button" value="上一页" @click="FenYe('b')">
        <input type="button" value="下一页" @click="FenYe('c')">
        <input type="button" value="尾页" @click="FenYe('d')">
    </div>
</template>



<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let route = useRoute();
let router = useRouter();
let data: any = reactive({
    hn: {
        "price": '',
        "name": "",
        index: 1,
        size: 2,
    },
    list: [],
    ids: [],
    checkAll: false,
    zt: 0,
    zy: 0,
    price1: "",
    price2: "",
});
let { hn, list, ids, checkAll, zt, zy, price1, price2 } = toRefs(data);

onMounted(() => {
    show();
})
let show = () => {
    let obj = {
        
        "name": hn.value.name,
        index: hn.value.index,
        size: hn.value.size,
        price1: price1.value,
        price2: price2.value,
    };
    axios({
        url: '/api/HouseNumber/HnList',
        method: 'get',
        params: obj
    }).then((res) => {
        list.value = res.data.data;
        zt.value = res.data.zt;
        zy.value = res.data.zy;
    })

}

let QuanFan = () => {
    checkAll.value = !checkAll.value;
    if (checkAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id;
        })
    }
    else {
        ids.value = [];
    }
}

const FenYe = (fy: any) => {
    switch (fy) {
        case 'a':
            if (hn.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            hn.value.index = 1;
            break;
        case 'b':
            if (hn.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            hn.value.index --;
            break;
        case 'c':
            if (hn.value.index == data.zy) {
                alert("已经是最后一页了")
                return;
            }
            hn.value.index ++;
            break;
        case 'd':
            if (hn.value.index == data.zy) {
                alert("已经是最后一页了")
                return;
            }
            hn.value.index =data.zy;
            break;

    }
    show();
}

const DelAll=()=>{
    if(ids.value.length==0){
        alert("请选择要删除的数据")
        return;
    }
    let res=confirm("确定要删除吗？")
    if(res)
    {
        let obj={
            ids:ids.value.toString()
        }
        axios({
            url:'/api/HouseNumber/DelAll',
            method:'delete',
            params:obj
        }).then((res)=>{
            if(res.data.data==1)
        {
            alert("删除成功")
            checkAll.value=false;
            show();
        }
        else
        {
            alert("删除失败")
            return;
        }
        })
    }
}
const UpDownAll=(state:any)=>{
    if(ids.value.length==0){
        alert("请选择要启禁用的数据")
        return;
    }
    let res=confirm("确定要启禁用吗？")
    if(res)
    {
        let obj={
            ids:ids.value.toString(),
            state:state,
        }
        axios({
            url:'/api/HouseNumber/UpDownAll',
            method:'put',
            params:obj
        }).then((res)=>{
            if(res.data.data==1)
        {
            alert("启禁用成功")
            checkAll.value=false;
            show();
        }
        else
        {
            alert("启禁用失败")
            return;
        }
        })
    }
}

const FanTian=(id:any)=>{
    router.push
    ({
        path:'/upd',
        query:{
            id:id
        }
    })
}




</script>

<style scoped></style>